/*
待办事项：
1.添加登录信息本地存储功能
2.添加验证码功能
3.密码或用户名错误提示
4.账号不存在提示
5.加载提示
*/

<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/image/plant.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="inputWrapper" style="margin-top: 2pc;">
				<input class="input" type="text" placeholder="请输入用户名" @input="input_account" />
			</view>
			<view class="warn" v-if="nameCheck">*用户名不能为空</view>
			<!-- <view v-else class="warn" style="color: white;">用户名合格</view> -->
			<view class="inputWrapper">
				<input class="input" type="password" placeholder="请输入密码" @input="input_key" />
			</view>
			<view class="warn" v-if="pswdCheck">*密码不能为空</view>
			<!-- <view v-else class="warn" style="color: white;">密码合格</view> -->
			<view class="loginBtn" hover-class="loginBtn2"
				@click="login">
				<text class="btnText">登录</text>
			</view>
			<view class="bottomBTN">
				<view class="forgotBtn" @click="forgetP">
					<text>找回密码</text>
				</view>
				<view class="forgotBtn" style="float: right;" @click="register">
					<text>没有账号</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: {
					name: '',
					key: '',
				},
				nameCheck: false,
				pswdCheck: false,

			}
		},
		onReady() {
			console.clear();
			console.log("Ready");
			uni.getStorage({
				key: 'localUserNmae',
				success(res) {
					console.log(res.data);
				},
				fail() {
					console.log("无用户数据")
				}
			})
			
		},
		onLoad() {
			uni.getStorage({
				key: 'localUserNmae',
				success(res) {
						uni.switchTab({
							url: '/pages/message/message'
						});
				}
			});
		},
		methods: {
			login() {
				console.log(this.nameCheck);
				console.log(this.pswdCheck);
				if (!this.nameCheck && !this.pswdCheck) {
					console.log("acount:" + this.account.name + " key:" + this.account.key);
					uni.request({
						url: 'http://192.168.5.3:9091/api/login', //真实接口地址。

						method: 'POST',
						data: {
							username: this.account.name,
							password: this.account.key
						},
						header: {
							'custom-header': 'login' //自定义请求头信息
						},
						success: (res) => {
							console.log(res.data);
							if (res.data.code == 200) {
								//记录本地用账户
								uni.setStorage({
									key: 'localUserNmae',
									data: this.account.name,
									success: (res) => {
										console.log('UserNameLoad');
									}
								});
								uni.showToast({
									title: "登录成功",
									duration: 1000,
									success() {
										console.log('UserNameLoad');
									}
								});
								uni.switchTab({
									url: '/pages/message/message'
								});
							} else {
								console.log("登录失败")
								if (res.data.code == 300) {
									uni.showToast({
										title: "账户不存在",
										image: "../../static/image/teng.jpg",
										duration: 1000,
									})
								}
								if (res.data.code == 500) {
									uni.showToast({
										title: "被错误密码气晕",
										image: "../../static/image/ma.jpg",
										duration: 1000,
									})
								}
							}
						},
						fail: () => {
							console.log("链接失败")
						}
					});
				} else {
					uni.showToast({
						title: "请修正错误",
						icon: "error",
					})
				}
			},
			input_account(value) {
				
				//补充正则表达式检测空格
				if (value.detail.value != "") {
					this.account.name = value.detail.value;
					this.nameCheck = false;
				} else {
					this.nameCheck = true;
				}
			},
			input_key(value) {
				if (value.detail.value != "") {
					this.account.key = value.detail.value;
					this.pswdCheck = false;
				} else {
					this.pswdCheck = true;
				}
			},
			register() {
				uni.navigateTo({
					url: '/pages/registered/registered' //测试用代码，正式上线时删除
				});
			},
			forgetP() {
				uni.navigateTo({
					url: "/pages/forgetPasswords/forgetPasswords",
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
		
		/* background-image: url('/static/image/background.jpg');
		background-size: cover; */
	}

	.avatorWrapper {
		height: 30vh;
		width: 100vw;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.avator {
		width: 146px;
		height: 196px;
		overflow: hidden;

	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0upx 100upx;

	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 10px;
		background-color: #c8c9cc;



	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;

	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #19be6b;
		border-radius: 50upx;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.bottomBTN {
		width: 100%;
	}

	.loginBtn .btnText {
		color: white;

	}

	.forgotBtn {
		float: left;
		text-align: center;
		color: #19be6b;
		font-size: 15px;
		margin: 10px;
	}
	
	.loginBtn2 {
		
		width: 100%;
		height: 80upx;
		background: #128d4d;
		border-radius: 50upx;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.warn {
		color: #fa3534;
		font-size: 15rpx;
		float: inherit;
		margin: 0px;
		background-color: #c8c9cc;
	}
</style>